﻿@model NOSDC.Areas.Admin.Models.DocumentModelView
@{
    ViewBag.Title = "Create Document";
}
@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Upload a new document</legend>
        <div style="padding-bottom: 20px;">
            <div>
                <div class="editor-label">
                    <strong>@Html.LabelFor(model => model.Document.Title)</strong>
                </div>
                <div class="editor-field">
                    @Html.TextBoxFor(model => model.Document.Title, new { style = "width:400px;" })
                    @Html.ValidationMessageFor(model => model.Document.Title)
                </div>
            </div>
            <div>
                <div class="editor-label">
                    <strong>@Html.LabelFor(model => model.Document.Description)</strong>
                </div>
                <div class="editor-field">
                    @Html.TextAreaFor(model => model.Document.Description, new { style = "width:400px;" })
                    @Html.ValidationMessageFor(model => model.Document.Description)
                </div>
            </div>
            <div id="afterUpload" style="display:none;">
                <div>
                    <div class="editor-label">
                        <strong>File Name: </strong>@Html.TextBoxFor(model => model.Document.FileName, new {@readonly = true, @class = "TextBoxAsLabel", style = "width:400px;"})
                    </div>
                </div>
                <div>
                    <div class="editor-label">
                        <strong>File Size (bytes):</strong> @Html.TextBoxFor(model => model.Document.FileSize, new {@readonly = true, @class = "TextBoxAsLabel", style = "width:400px;"}) 
                    </div>
                </div>
                <div>
                    <div class="editor-label">
                        <strong>Upload Date:</strong> @Html.TextBoxFor(model => model.Document.UploadDate, new {@readonly = true, @class = "TextBoxAsLabel", style = "width:400px;"})
                    </div>
                </div>
                <div>
                    <div class="editor-label">
                        <input type="submit" value="Create Document" />
                    </div>
                </div>
            </div>
            <div id="uploadArea">
                <div class="editor-label">
                    <div id="file-uploader">
                        <noscript>
                            <p>
                                Please enable JavaScript to use file uploader.</p>
                        </noscript>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
}

<link href="../../../../Scripts/Upload/fileuploader.css" rel="stylesheet" type="text/css" />
<script src="../../../../Scripts/Upload/fileuploader.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var uploader = new qq.FileUploader({
            element: document.getElementById('file-uploader'),
            action: '/Documents/UploadFile',
            messages: {
                 showMessage: function (message) {
                     alert(message);
                 }
            },
            onComplete: function (id, fileName, responseJSON) {

                $("#Document_FileSize").val(responseJSON.FileSize);
                $("#Document_FileName").val(responseJSON.FileName);
                $("#Document_UploadDate").val(responseJSON.UploadDate);
                $("#afterUpload").fadeIn('slow');
                $("#uploadArea").hide();
            }
        });
    });
</script>
